@import url('@shoelace-style/shoelace/dist/themes/light.css');
@import url('bigger-picture/dist/bigger-picture.css');

* {

    &,
    &::before,
    &::after {
        box-sizing: border-box;
        scrollbar-color: var(--primary-hover-bg) var(--comfy-menu-bg);
        scrollbar-width: thin;
    }
}


html {
    display: flex;
    flex: 1 auto;
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-color);
    --jk-feed-bar-height: 42px;
    --left-panel-gutter-size: 16px;
}

body {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
}

.jk-img-wrapper {

    .jk-img-title {}

    .jk-spinner-wrap {
        position: relative;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        .jk-spinner {
            background-color: transparent;
            border: 4px solid var(--border-color);
            border-top: 4px solid var(--fg-color);
            border-radius: 50%;
            width: 64px;
            height: 64px;
            animation: spin 2s linear infinite;

        }
    }
}

#jk-image-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 auto;
    height: calc(100vh - var(--jk-feed-bar-height));
    position: relative;


    #jk-grid-panel {
        display: flex;
        position: relative;
        flex: 1 auto;
        height: 100%;
        padding: 16px;
        overflow-y: auto;
        flex-direction: column;

        --grid-panel-gutter-size:8px;
        #jk-grid-inner{
            overflow-y: visible !important;
        }
        .jk-img-wrapper {
            max-width: 25%;
            margin-bottom: var(--grid-panel-gutter-size);
            padding-left: var(--grid-panel-gutter-size);
            padding-right: var(--grid-panel-gutter-size);

            .jk-img-hover {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: var(--grid-panel-gutter-size);
                margin-right: var(--grid-panel-gutter-size);
                margin-bottom: calc(var(--grid-panel-gutter-size) / 2);
                sl-icon {
                    opacity: 0;
                    font-size: 32px;
                    transition: all 0.3s ease-in-out;
                    scale: 1;
                }

                &:hover {
                    background-color: rgba(1, 1, 1, .5);
                    transition: all 0.3s ease-in-out;

                    sl-icon {
                        opacity: 1;
                        transition: all 0.3s ease-in-out;
                        color: var(--fg-color);
                        scale: 1.25;
                    }
                }

                cursor: pointer;
            }

            .jk-img-info-wrapper {
                margin-left: var(--grid-panel-gutter-size);
                margin-right: var(--grid-panel-gutter-size);
                position: absolute;
                bottom: 0;
                left: 4px;
                padding: 4px;
     
                overflow: hidden;
                pointer-events: none;
                word-break: break-all;
            }

            .jk-img {
                width: 100%;
                height: auto;
            }
        }
    }

    sl-split-panel {
        .jk-img-wrapper {
            max-width: 100%;
            max-height: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            margin-top: 16px;
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: 16px;
            padding-left: var(--left-panel-gutter-size);
            padding-right: var(--left-panel-gutter-size);
            align-items: center;
            position: relative;

            .jk-img-hover {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                display: flex;
                justify-content: center;
                align-items: center;

                sl-icon {
                    opacity: 0;
                    font-size: 32px;
                    transition: all 0.3s ease-in-out;
                    scale: 1;
                }

                &:hover {
                    background-color: rgba(1, 1, 1, .5);
                    transition: all 0.3s ease-in-out;

                    sl-icon {
                        opacity: 1;
                        transition: all 0.3s ease-in-out;
                        color: var(--fg-color);
                        scale: 1.25;
                    }
                }

                cursor: pointer;
            }


            .jk-img-info-wrapper {
                position: absolute;
                bottom: 0;
                left: calc(var(--left-panel-gutter-size) + 4px);
                padding: 4px;
                max-width: calc(100% - var(--left-panel-gutter-size) - 24px);
                overflow: hidden;
                pointer-events: none;
                word-break: break-all;
            }

            .jk-img {
                width: 100%;
                max-width: 100%;
                height: auto;
                max-height: 100%;
                flex-shrink: 1;
                cursor: pointer;

                &:hover {
                    //border-radius: 16px;
                }
            }
        }

    }

    sl-split-panel {
        width: 100%;
        height: 100%;

        &::part(divider) {
            background-color: var(--fg-color) !important;
        }

        #jk-gallery-left-panel {
            height: 100%;
            display: flex;
            overflow-y: scroll !important;
            flex-direction: column;
            overflow: hidden;
            padding-bottom: 16px;


        }

        #jk-gallery-right-panel {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto;


            .jk-rightpanel-container {
                display: flex;
                height: calc(100% - var(--jk-feed-bar-height));
                width: 100%;
                flex-direction: column;
                overflow: hidden;
                align-items: center;

                .jk-view-prompt-info-btn {
                    // position: absolute;
                    // top: 0;
                    // right: 0;
                }

                .jk-rightpanel-title {
                    margin-top: 16px;
                    max-width: 50%;
                    width: 50%;
                    padding-left: 16px;
                    padding-right: 16px;

                    div,
                    button {
                        border: 1px solid var(--border-color);
                        padding: 4px;
                    }
                }

                .jk-img-wrapper {
                    padding: 0;
                    max-width: calc(100% - 32px);
                    height: auto;
                    padding-bottom: 16px;

                    .jk-img {
                        width: auto;
                    }
                }

                .jk-rightpanel-info {
                    color: var(--fg-color);
                    width: 100%;
                    display: flex;
                    padding: 16px;
                }
            }
        }
    }

}

#jk-feed-bar {
    height: var(--jk-feed-bar-height);
    background-color: var(--comfy-menu-bg);
    width: 100%;
    padding-left: 8px;

    .comfyui-button-group {
        height: 100%;
        padding: 4px;

        &.center {
            margin-left: auto;
            margin-right: auto;

        }

        &.right {

            position: absolute;
            right: 0;
            height: var(--jk-feed-bar-height);
        }

    }

    .jk-checkbox-wrapper {}

}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.jk-info-dialog {
    background-color: var(--bg-color);
    height: 90vh;
    width: 90vw;

    .info-dialog-header {}

    .jk-dialog-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        color: var(--fg-color);
        background-color: var(--comfy-menu-bg);
        padding: 8px;
    }

    .info-dialog-header {
        display: flex;

        input {
            font-size: 1em;
            padding: 8px;
            background-color: var(--content-bg);
            color: var(--fg-color);
            border: none;
        }

        .comfyui-menu {
            display: flex;
            margin-left: 16px;
        }
    }
}